<template>
	<!-- 支付设置 -->
	<view class="bigbox">
		<u-form :model="form" ref="uForm">
			<u-form-item>
				<image src="/static/img/my/7root-tell.png" class="w20 h30 mr24"></image>
				<u-input v-model="form.mobile" placeholder="请输入手机号"></u-input>
			</u-form-item>
			<u-form-item>
				<image src="/static/img/my/7root-yanzheng.png" class="w20 h26 mr24"></image>
				<u-input v-model="form.captcha" placeholder="请输入验证码"></u-input>
				<text @tap="getCode">{{tips}}</text>
			</u-form-item>
			<u-form-item>
				<image src="/static/img/my/7root-pw.png" class="w20 h26 mr24"></image>
				<u-input v-model="form.password" placeholder="请设置支付密码"></u-input>
			</u-form-item>
			<u-form-item>
				<image src="/static/img/my/7root-pw.png" class="w20 h26 mr24"></image>
				<u-input v-model="form.password_re" placeholder="请设置确认密码"></u-input>
			</u-form-item>
		</u-form>
		<view class="mr56 h86 paybtn" @tap="submit()">
			确认
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" unique-key="login" :keep-running="true">
		</u-verification-code>
	</view>
</template>

<script>
	import getcode from '@/mixins/getcode.js'
	export default {
		mixins:[getcode],
		data() {
			return {
				form: {
					mobile: '',
					password: '',
					password_re: '',
					captcha: ''
				},
				placeholderStyle: {
					fontSize: '28rpx',
					fontFamily: 'PingFang SC',
					fontWeight: '500'
				},
				tips: '获取验证码',
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			// getCode() {
			// 	if (this.$refs.uCode.canGetCode) {
			// 		// 模拟向后端请求验证码
			// 		uni.showLoading({
			// 			title: '正在获取验证码'
			// 		})
			// 		this.$api.send({
			// 			mobile: this.form.mobile
			// 		}).then(res => {
			// 			uni.hideLoading();

			// 			// 这里此提示会被this.start()方法中的提示覆盖
			// 			this.$u.toast('验证码已发送');
			// 			// 通知验证码组件内部开始倒计时
			// 			this.$refs.uCode.start();
			// 		})
			// 		// 		setTimeout(() => {
			// 		// 			uni.hideLoading();

			// 		// 			// 这里此提示会被this.start()方法中的提示覆盖
			// 		// 			this.$u.toast('验证码已发送');
			// 		// 			// 通知验证码组件内部开始倒计时
			// 		// 			this.$refs.uCode.start();
			// 		// 		}, 500);
			// 	} else {
			// 		this.$u.toast('倒计时结束后再发送');
			// 	}
			// },
			submit() {
				this.$api.updatepwdpay(this.form).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.bigbox {
		text {
			font-size: 22rpx;
			font-weight: 500;
			color: #FD1D4D;
		}
	}

	.paybtn {
		width: 80%;
		position: fixed;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		z-index: 99;
	}
</style>
